avatar habrahabr_full

Хабрахабр без ката



подробнее...

Следить за персональным блогом


Автоматизированная система Промышленная безопасность и охрана труда

Обновления главной ленты блогов
Вконтакте Facebook Twitter RSS Почта Livejournal
Внимание

На нашем портале можно бесплатно публиковать информацию о своей компании, размещать товары и услуги и цены на них.
Ведите свой личный или корпоративный блог и его ежедневно увидят 30 тысяч посетителей нашего сайта.

28 октября 2017, 19:29

[Перевод] UX-дизайн: 50 вещей, которые вы наверняка забыли сделать


«Я не злюсь, я просто разочарован.» — PMimage Иногда приложение кажется простым, минималистичным и лаконичным, но легко упустить из виду то, сколько экранов, формочек, кнопочек, окошек и прочих мелочей приводит к такому восприятию легкости и простоты использования. Представляем вам чеклист из 50 пунктов для самопроверки. Вот примерные подразделы:

  1. Логин и регистрация
  2. Первый опыт
  3. Важные детали
  4. Запуск
  5. Профиль
  6. Безумные потоки

Логин и регистрация

1. Заставка Экран, который появляется при запуске мобильного приложения или при входе в веб-приложение и все загружается.imageВот красивый вариант от Джеймса Джексона.2. Поток забытых паролей Это было «abcd1234» или " 1234abcd”? Это важно. Не забывай об этом.imageMajo Puterka не оставляет своих пользователей запертым около дома под дождем.3. Страница «Спасибо за регистрацию» Этот экран обычно появляется после того, как пользователь создает учетную запись и просит подтвердить адрес электронной почты.imageЧто дальше? Спросите Хейли Каттлин.4. Приветствующие письмо Это возможность создать первое впечатление и задать тон общения с пользвателями. Примите это в расчет.imageМне действительно это нравится. Брайан Голатка.5. Условия предоставления услуг и конфиденциальности (тьфу) Помогите людям действовать в рамках закона.imageЯ очень ценю, как Марко Прлич пытался сделать условия и конфиденциальность более доступными.

Первый опыт

6. Onboarding, первый контакт с пользователем Есть куча разных способов, которые вы можете использовать. Вот пять моих фаворитов Onboardibg`а.imageВосхитительно полезно, MuNa.7. Подсказка, если пользователь что-то забыл Это как переехать в дом без мебели. Выглядит довольно пустым, да? Помогите пользователям, подтолкните в правильном направлении. «Поместите сюда диван.»imageЯ чувствую, что Вели-Йохан Вероманн любит супергероев.8. Справочные документы Если это большой коммерческий проект, то вероятно там есть целая команда для этого. Но они все равно продолжают получать скриншоты с багами. Это заслуживает столько же (или больше) усилий, как для страницы с логином или ленты.imageМайя Гао очень полезна. Будь как Майя.9. Стандартный пользовательский интерфейс Изображения/Аватары Регистрация с помощью социальных аккаунтов или сервисов, таких как Gravatar, действительно помогла нам продемонстрировать ваши улыбающиеся лица, но вы все равно получите того парня, который никогда не захочет загружать фото профиля. Дайте ему немного красоты и продемонстрируйте бренд.imageHermes Strange делает милый материал. Это симпатичные аватары.10. Кнопка Выхода К сожалению, вы должны разрешить пользователям выходить. Просто представьте, что они используют ваше приложение в публичной библиотеке, и им необходимо выйти из системы, чтобы какой-то незнакомец не изменил имя учетной записи на «Mr. Butts». imageЯ предполагаю, что Кристофер, вероятно, украл обеденные деньги Хенрика. Пусть он выйдет и покинет сцену.

Важные детали

11. Футер приложения Большую часть времени я думаю, что страницы могут продолжаться вечно, также, как люди верили, что мир плоский, и просто продолжали идти. Примечание: Земля не плоская.imageЭш Швейцер может быть потерян где-то в лесу. Кто-то поможет ей.12. Favicon (значок в браузере) Знаешь… ту маленькую иконку, которая появляется на вкладке браузера. Я постоянно теряю вкладки с Medium, потому что значок больше не зеленый. Но это красиво.imageМайкл Фларуп создал потрясающий шаблон для значков, который вы можете скачать.13. 404 Страница Ризван застряла в этой дыре. Пойдите ей помочь.image[Большая статья на Хабре про 404 страницы]14. Состояния кнопки по умолчанию/при наведении/фокус/при нажатии/отключена/и т.д. Тьфу, столько состояний. “Фокус + Наведение” мог быть самым моим любимым/неясным. Скриншот ниже взят тут: UX Power Tools Design System.image15. Порядок перехода по нажатию Tab Порядок перехода — это специальная возможность, которая позволяет пользователям перейти на страницу с помощью клавиши Tab. Я не мог найти изображение, чтобы показать это, поэтому я сделал скриншот спецификации Christian Beck 2007 года, где он определил правила табуляции для каждого элемента управления пользовательского интерфейса в таблице. Фактически вы можете определить порядок, в котором элементы посещаются, чтобы расставить приоритеты, что первично, что вторично. Это непростая задача дизайна.imageДни написания 80-страничных спецификаций и разработка по методике «Водопада».16. Поведение при скроллинге Не только где и как прокручивается, но что на самом деле прокручивается. Заголовок фиксированный? Футер?imageПитер Блейзи, это выглядит гладко. Круто.17. Кнопка Intercom Я имею в виду меньшее, что вы можете сделать, это сделать сочетания цветов в вашем приложении. imageПроще, чем Доширак заварить.18. Кнопки нумерации страниц Предполагаю, что Вы не сделаете бесконечную прокрутку, пользователю нужен способ, чтобы добраться до страницы 27. Дайте ему это.imageБоронда проделал хорошую работу. Люблю этот желтый, Борунда.19. Курсоры Кнопки должны иметь курсоры. Неинтерактивный материал должен иметь курсор по умолчанию. Текст должен иметь текстовый курсор. Разработчики не всегда это знают. Я просто на днях видел приложение, где при наведении на кнопку был текстовый курсор. О боже.imageДжефф Бродерик любит нажимать на вещи. Он также сделал халяву.20. Таблица сортировки/фильтра/механизмы поиска Там должен быть более быстрый способ добраться до ZZ Top в таблице данных «Bands with Beards»…image21. Пустые состояния «без результатов” Иногда вы будете искать что-то или добавите слишком много фильтров, и не получите никаких результатов. Как грустно. Развеселите своих пользователей дерзкими иллюстрациями. Или вашим банковским счетом и номером маршрута.imageРайнер Уэндланд попробовал все для Zendesk.22. Состояние ошибки Неправильный ввод. Неправильный пароль. Существующий аккаунт. Слишком много вещей выбрано. Есть много вариантов, когда что-то может пойти не так, особенно если ты бабушка и ты получила iPad на Рождество. Это была ошибка.imageМайк Стезицки действительно заставил меня думать, что письмо отправлено. 23. Системные оповещения Система всегда делает что-то в фоне, и иногда приятно знать, когда все закончится успешно (или нет). Вы должны определенно сообщить пользователю об этом.imageЭто взято с Google Inbox. «Отменить» действительно удобно, когда вы «случайно» удаляете письмо от своей мамы.24. Пустой выпадающий список автозаполнения Автозаполнение прикольное, если помогает вам найти что-то, но иногда нет никаких результатов. В этом случае вы не хотите видеть пустое окно. Покажите небольшое сообщения, или позвольте им что-то сделать.imageПо-видимому, у Джурриана ван Друнена уже нет «Бра» в его контактах. Наверное, это к лучшему.25. Состояние загрузки Конечно, люди, вероятно, будут Tindering на своих телефонах, пока страница загружается, но в случае, если они действительно смотрят, вероятно, должно быть какое-то визуальное указание, что материал по-прежнему загружается.imageНе лучшая формочка, XPLAI. Продолжай практиковаться. Но это все еще болезненно восхитительно.

Запуск

26. Чертова иконка приложения Да, наверное, лучше не забывать об этом.imageЯ готов поспорить, что Эдди Лобановский изменил все свои значки на завтраки. Вкусно.27. Изображение для App StoreimageДаниэль Бир не забыл изображение для App Store для своего приложения. Дай пять, чувак.28. Картинка для соцсеточек и Open Graph Это изображение, которое появляется, когда вы кидаете ссылку на Twitter, публикуете сообщение на Facebook, размещаете ссылку на Medium и т. д.…image Вот как это выглядит на Medium:image29. Картинка для Website Marketing Также не забывайте, что они, вероятно, захотят сделать сайт похожим на Stripe, поэтому просто скопируйте его именно так:image30. Изображения торговой площадки Вы, наверное, хороши, если справляетесь с тем, что было выше. Но в этом случае вам, вероятно, потребуется очистить контент, чтобы он соответствовал бренду любого 6-значного соглашения, над которым работает ваша блестящая команда продаж.image О, и продажи, вероятно, прикроют все ваши макеты другими вещами, поэтому подготовьтесь к этому.31. Изображения Pitch Deck Как изображение торговой площадки, но немного более дальновидное. Я имею в виду… вы пытаетесь собрать деньги. Вы увидите, как это сделать позже.image Вот коммерческая тайна, всегда класть приборные панели в свою колоду. Это не шутка.32. Изображения для Product Hunt Эй, они просто обновили страницы профиля.image33. Изображения рекламы в Facebook/Twitter «Но у нас нет рекламы в Facebook.» Ха, пока не появится. И тогда никто не скажет вам. Просто сделайте их заранее и вы будете спокойны.image34. Изображения профиля в социальных сетях Да, вы должны сделать одно для всех 938 социальных сетей. К счастью, мы сделали инструмент Sketch, чтобы ускорить это для вас. Приветствую вас, дети.image35. Email баннерimage Тройные точки, если вы сделаете это иллюстрацией. ^ кстати, это рассылка моего агентства и мои коллеги пишут некоторый действительно выдающийся контент. Вот некоторые последние фавориты:image image

Профиль

36. Настройки уведомлений Круто, когда приложения сообщают вам, когда что-то происходит, и даже более классно, когда он играет звук оповещения. Но после 19-го раза вы действительно устали от оповещений. Вероятно, вы должны позволить пользователю решить, когда звучат уведомления.imageSlack не стал компанией стоимостью в 8 миллиардов долларов, забивая на настройки уведомлений. Успешно справился.37. Страница выставления счетов Не забывайте, что люди должны получать копии своих счетов, чтобы оплачивать продукт, за который они платят вам тысячи долларов. И некоторые люди составляют идиотский ИТ-отдел для своего агентства и не могут понять, как трудно найти это. Каждый месяц. Он не горький.imageЯ не знаю, что это значит, но добраться сюда было легко.38. Опция „Удалить мой аккаунт“ Правильно, я знаю. Никто не сделает этого. Но, может, они снова создадут новую учетную запись когда-нибудь. Как люди, которые передают киоск в торговом центре и говорят: «Я вернусь позже и куплю три.» Ну да, конечно. Есть законные причины для этого, которые являются положительными. Я удалил учетные записи, так как я объединился в более крупную лицензию. Я удалил старые учетные записи, которые собрали пыль, и я хотел начать новую работу. В любом случае, это хорошее обслуживание клиентов.image Тссс, Mr. President, вы можете отключить свою учетную запись здесь.39. Инструмент для обрезки фотографии профиля Ну, это сценарий кошмара для большинства приложений, и это не обязательно. У меня был Кристиан, который отправил мне скриншот ранее, когда он менял фотографию своего профиля на фотку Бейонсе.imageОн не мог даже пройти мимо этого экрана, чтобы показать, как он обрезал фотографию. 2 из 10 звезд.40. Опция/поток” Обновление моего аккаунта» Это пугает мой разум, насколько это сложно для многих продуктов SaaS. Заткнись и возьми мои деньги. Разве это не должно быть легко ?! Как… ЛЕГКО?!imageБуфер имеет пункт меню для обновления, довольно простую форму. У тебя есть мои деньги.

Безумные потоки

41. Поток «Изменить мой адрес» Знаешь, когда ты получишь шикарную новую квартиру в центре города, и тебе придется менять свой адрес на каждой кредитной карте, которую ты когда либо имел?imageДхавал С. Ганди хочет убедиться, что его Алоэ Вера отправлен в нужное место.42. Поток «Добавить кредитную карту» Некоторые люди (хм, я) любят хранить около ста кредитных / дебетовых карт в файле, чтобы воры имели множество учетных записей на выбор. Поэтому упростите добавление карт. Это все, что я должен сказать об этом.imageЭто выглядит слишком реально, Карлос Медина. Не имею отношения, я только что купил некоторые новые туфли, и это не стоило ни копейки.43.Поток «массового добавления» Одно дело быстро добавить объект в систему, но совсем другое — сделать так, чтобы быстро добавить группу объектов в систему.imageПожалуйста, сэр, разрешите еще?44. Поток «Создание пользовательского фильтра» Если вы разрешите сложную фильтрацию, возможно, было бы неплохо добавить возможность сохранить этот сложный фильтр позже. Таким образом, вам больше не нужно щелкать миллион раз.imageOykun Yilmaz может сделать этот шаг дальше, позволяя пользователю сохранить этот фильтр. Сделай это, Oykun.45. Поток «Добавить в корзину» Смешно думать, что люди забывают об этом потоке, но вы знаете… Я один из тех людей. Заткнись.imageВидимо, Альберто Конти нужны 4 стула, 4 тумбочки. Должно быть, большой дом…46. Поток «Поделиться» Обмен стал довольно распространенным в Интернете, но это не значит, что он уже разработан для вас. Тем более, что нужно потратить некоторое время на это.imageТомек Квятковский действительно знает, как стать социальным.47. Поток «Создать из существующего» Это вроде как “дубликат + редактировать” все в одном действии. В основном пользователь может начать с существующего объекта и обновить его по мере необходимости.imageКайл Джонстон пишет много сценариев. Может быть, тайно Кристофер Нолан?48. Поток «Пригласить кого-то» Там нет лучшего способа добавить некоторые «вирусность» к вашему продукту, чем через приглашения и расшаривания. Глядя на тебя, Дриббл. imageЯ думаю, что Паула Пинтарик и Кристина отправляются в рейс. Или они работают над проектом и смотрят, как летают другие люди. Это еще хуже.49. Поток «Изменить разрешения пользователя» Вы знаете этого парня Грега? Ты знаешь, как он извращает все, чего касается? Да, вы можете отменить некоторые привилегии Грега, чтобы он не удалял цельность Интернета. Глупый Грег.imageМэтт Швери, с другой стороны… гораздо меньше надоедлив, чем Грэг.50. Поток «Удалить и восстановить» Вы знаете, когда вы удаляете что-то супер важное и нужно немедленно его восстановить? Нет? Хорошо.imageЭрик Цай понимает, что мы все ошибаемся.51. Может мы о чем то забыли? Пишите в комментариях. Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой приложений и сайтов на PHP для крупных заказчиков, а так же разработкой облачных сервисов и мобильных приложений на Java.

Источник: https://habrahabr.ru/post/341060/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best